<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/tab/tab.js" ></script>
<div id="tabDemo">
    <div title='API' tabid='tab1'>
	    <div>
	    	<h2>$.fn.ccayTab(ops)</h2>
	    	<h3>作用：tab 控件渲染接口，ops可不传</h3><br>
	    	<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>						
				    <li class="ccay-form-row">
				        <samp><h3>ops参数</h3></samp>
						<span class="ccay-form-input">
							<h3>描述</h3>
						</span>
					</li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="width"></samp>							    
						<span class="ccay-form-input">
							{Number}<p>tab的宽度 ， 可选
							<p>默认值：100%
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="height"></samp>							    
						<span class="ccay-form-input">
							{Number}<p>tab的高度 ， 可选
							<p>默认值：自适应
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="itemMaxCount"></samp>							    
						<span class="ccay-form-input">
							{Number}<p>限制tab项数目最大数，可选
							<p>默认值：10
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="defaultItemId"></samp>							    
						<span class="ccay-form-input">
							{String}<p>默认选中的tab项的tabId，可选
							<p>默认值：第一个tab项
							<p>需在html中指定tabid属性
							<p><font color="red">或者在html中的对应项div指定selected属性
							<p>如：&lt;div title="XXX" selected>...&lt;/div>
							</font></span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="fnBeforeAddItem"></samp>							    
						<span class="ccay-form-input">
							{Function}<p>添加tab项的before事件
							<p>参数：tabid
							<p>return false时阻止添加tab
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="fnAfterAddItem"></samp>							    
						<span class="ccay-form-input">
							{Function}<p>添加tab项的after事件
							<p>参数：tabid
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="fnBeforeRemoveItem"></samp>							    
						<span class="ccay-form-input">
							{Function}<p>移除tab项的before事件
							<p>参数：tabid
							<p>return false时阻止关闭tab
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="fnAfterRemoveItem"></samp>							    
						<span class="ccay-form-input">
							{Function}<p>移除tab项的after事件
							<p>参数：tabid
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="fnBeforeSelectItem"></samp>							    
						<span class="ccay-form-input">
							{Function}<p>选中tab项的before事件
							<p>参数：tabid
							<p>return false时阻止选中tab
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="fnAfterSelectItem"></samp>							    
						<span class="ccay-form-input">
							{Function}<p>选中tab项的before事件
							<p>参数：tabid
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="fnOnceSelectItem"></samp>							    
						<span class="ccay-form-input">
							{Function}<p>选中tab项的一次执行事件，每次都会执行到该事件，事件内部需做tabid的判断，符合判断的逻辑只执行一次。
							<p>参数：tabid
						</span></li>
				    </ul>
			   </div>
		    </form>
	    	<h2>$.fn.ccayTabRemoveItem(index)</h2>
	    	<h3>作用：关闭Tab</h3>
	    	<div class="ccay-form-body ccay-form-custom">
						<ul>	
						    <li class="ccay-form-row">
						        <samp><h3>参数</h3></samp>
								<span class="ccay-form-input">
									<h3>描述</h3>
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp><h3>index</h3></samp>
								<span class="ccay-form-input">
									<h3>tab项的序号，从0开始算，默认为当前tab项</h3>
								</span>
							</li>
						</ul>
			</div><br>
			<h2>$.fn.getCcayTabManager() 或者 $.fn.manager() </h2>
	    	<h3>作用：得到tab管理器</h3>
	    	<div class="ccay-form-body ccay-form-custom">
						<ul>	
						    <li class="ccay-form-row">
						        <samp> 属性函数 </samp>
								<span class="ccay-form-input">
									 描述 
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp> getSelectedItemId() </samp>
								<span class="ccay-form-input">
									 获得当前选中tab项的tabid 
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp> getItemCount() </samp>
								<span class="ccay-form-input">
									 获得当前tab项的数量
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp> moveNext() </samp>
								<span class="ccay-form-input">
									 切换到下一个tab 
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp> movePrev() </samp>
								<span class="ccay-form-input">
									 切换到上一个tab  
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp> moveLast() </samp>
								<span class="ccay-form-input">
									 移动到最后一个tab 
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp> selectItem(tabid) </samp>
								<span class="ccay-form-input">
									 选中tab项 ，tabid为指定的tab的tabid。<font color="red">也可通过此项设置，可实现在进入页面时，设置默认的tab页。或在html中设置lselected=true</font>
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp> selectPrevItem() </samp>
								<span class="ccay-form-input">
									 选中当前选中的tab项的前一个tab项
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp> selectNextItem() </samp>
								<span class="ccay-form-input">
									 选中当前选中的tab项的下一个tab项
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp> removeItem(tabid)</samp>
								<span class="ccay-form-input">
									移除tab项 ，tabid为指定的tab的tabid。
								</span>
							</li>
							<li class="ccay-form-row">
						        <samp> isItemExist(tabid)</samp>
								<span class="ccay-form-input">
									判断此tabid的项是否存在，返回布尔值
								</span>
							</li>
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="addItem(options)"></samp>
							    <span class="ccay-form-input">
							    		增加一个tab，其中  options有：
									 	<table class="ccay-table">
									 		<tr>
										 		<td>selected</td>
										 		<td>
										 		{Boolean} 是否添加项后并选中，默认选中，指定为false阻止选中
										 		</td>
										 	</tr>
										 	<tr>
										 		<td>closeByConfirm</td>
										 		<td>
										 		{Boolean} 是否需要关闭前确认，默认false
										 		</td>
										 	</tr>
										 	<tr>
										 		<td>isOpenConfirm</td>
										 		<td>
										 		{Boolean} 是否覆盖确认，默认false
										 		</td>
										 	</tr>
										 	<tr>
										 		<td>tabId</td>
										 		<td>
										 		{String} 指定添加的tab项的tabid
										 		</td>
										 	</tr>
										 	<tr>
										 		<td>title</td>
										 		<td>
										 		{String} 指定添加的tab项的名称，支持国际化
										 		</td>
										 	</tr>
										 	<tr>
										 		<td>url</td>
										 		<td>
										 		{String} 指定添加的tab项下的内容的页面地址。
										 		<p>如：url:"ccay/example/ui/button/button.html"，或者url:"Ccay.Demo.Tab"(需要页面注册)
										 		</td>
										 	</tr>
										 	<tr>
										 		<td>content</td>
										 		<td>
										 		{String} 指定添加的tab项下的内容，<font color="red">和url不能共存</font>。如：content:"&lt;div id='contentTest'>&lt;/div>"
										 		</td>
										 	</tr>
										 	<tr>
										 		<td>fnBeforeAddItem</td>
										 		<td>
										 		{Function} 添加tab项之前的事件，可在初始化的时候$.fn.ccayTab的op中设置，也可在此设置，则会覆盖原来的设置。
										 		</td>
										 	</tr>
										 	<tr>
										 		<td>fnAfterAddItem</td>
										 		<td>
										 		{Function} 添加tab项之后的事件，可在初始化的时候$.fn.ccayTab的op中设置，也可在此设置，则会覆盖原来的设置。
										 		</td>
										 	</tr>
									 	</table>
							    </span></li>
						</ul>
			</div>
	    </div>
	     
    </div>
    <div title='Demo1' tabid='tab2'>
		   <h4><span>功能效果展示:</span></h4>
		   <pre>注意：
设置默认tab：若不做其他设置，则默认显示第一个tab页。
需要更改默认tab页时：
  1、html设置tab的div添加<font color="red">lselected=true</font>
  2、可通过初始化tab后，设置selectItem(tabid)来默认显示tab页。</pre>
		   <div style='padding-left:30px'>
			<div id="testTab" style="overflow:hidden; border:1px solid #A3C0E8; "> 
			    <div title="默认Tab" tabid='testTab1' style="height:250px">
			        <p>hello，我好是默认的Tab，</br><font color="red">注意：若不做其他设置，则默认显示第一个tab页。需要更改默认tab页时，1:html设置tab的div添加lselected=true。2、可通过初始化tab后，设置selectItem(tabid)来默认显示tab页。</font> </p>
			    </div>
			    <div title="获取焦点" tabid="testTab2" style="height:250px" >
			        <p>获取焦点的代码实现，另有<font color="red">"fnOnceSelectItem"</font>事件，只在第一次选中执行
					<p>fnAfterSelectItem:function(tabid){
					<p>		tabid == "testTab2" && alert("hello world！");
					<p>}
				    <p style="color:red;">注意：须指定该tab的tabid="xxx"，而方便进行tabid的判断。如：&lt;div title="获取焦点" tabid="testTab2" >&lt;/div>
			    </div>
			    <div title="手动添加Tab" id="testTab3" style="height:250px">
			    	<span class="ccay-button" onclick="Ccay.example.ui.tab.openNewTab();">
			    		<a class="ccay-icon add"></a>
			    		<label>添加新tab</label>
			    	</span>
			    	<p>使用方法：Ccay.Common.openPage(title, url, options, fnCallback)来新增tab项
			    	<p>title：打开的tab项的名称，支持国际化
			    	<p>url：打开的页面地址
			    	<p>options：需指定options.tab设置，如tab:"#div2Tab",否则会弹出框模式，其他参数参考API中的addItem中options设置
			    	<p>fnCallback：打开后的回调
			    </div>
			</div>
			<h3>html Code</h3>
			<div class='codeArea'>
				<pre id='html'>
&lt;div id="testTab1"> 
	&lt;div title="testTab1" tabid='testTab11'>
	    &lt;p>初始化界面一 ,<font color="red">页面内容可直接html代码，也可使用ccayLoad加载别的html页面</font>&lt;/p>
	&lt;/div>
	&lt;div title="testTab2" tabid="testTab21">
	 	&lt;p>初始化界面二&lt;/p>
	&lt;/div>
	&lt;div title="获取焦点" tabid="testTab31">
	 	&lt;p>初始化界面三&lt;/p>
	&lt;/div>
&lt;/div>
                 </pre>
			</div>
			<h3>js Code</h3>
			<div class='codeArea'>
				<pre id='js'>
//初始化tab				
$("#testTab1").ccayTab({
	fnAfterSelectItem:function(tabid){
		tabid == "testTab31" && alert("hello world！");;
	}
});

</pre>
			</div>
			<div class="try">
				<a onclick="Ccay.example.openTry('#tabDemo',$('#js').html(),$('#html').html())">亲自试一试</a>
			</div>
		    </div>	
    </div>
    <div title='Demo2' tabid='tab3'>
	    <div class="ccay-grid-toolbar">
			<input type="button" value="addItem" onclick="Ccay.example.ui.tab.addItem1()" />
			<input type="button" value="addItem(with tabid)" onclick="Ccay.example.ui.tab.addItem2()" />
			<input type="button" value="addItem(with content)" onclick="Ccay.example.ui.tab.addItem3()" />
			<input type="button" value="addItem(with addItemAtAfter)" onclick="Ccay.example.ui.tab.addItem4()" />
			<input type="button" value="得到tab项数目" onclick="Ccay.example.ui.tab.getTabItemCount()" />
			<input type="button" value="关闭当前tab" onclick="Ccay.example.ui.tab.closeItem()" />
			<input type="button" value="指定tabid关闭tab" onclick="Ccay.example.ui.tab.closeItem1('nametab')" />
			<input type="button" value="选择前一个tab项" onclick="Ccay.example.ui.tab.selectPrevTabItem()" />
			<input type="button" value="选择后一个tab项" onclick="Ccay.example.ui.tab.selectNextTabItem()" />
		</div>
		<div id="tabDemo2">
			<div title="ccay.async.label.taskExportCatalogName" >2</div>
			<div title="ccay.async.label.taskExportFileName" tabid="nametab" >3</div>
		</div>
		
		<h3>Code:</h3>
			<div class='codeArea'>
1、添加tab项（addItem）：
<pre>
$("#XXX").getCcayTabManager().addItem({
	content:"hello world!!!,不指定tabId可打开多个相同的tab项，tabId随系统生成，但是此种方式问题较多，慎用！！！",
	title:"ccay.i18n.label.remark"
})
</pre>
</div>
<div class='codeArea'>
2、添加tab项（addItem(with tabid)）：
<pre>
$("#XXX").getCcayTabManager().addItem({
	url:"ccay/example/ui/combobox/combobox.html",
	tabId:"test",
	title:"ccay.i18n.label.remark"
})
</pre>
</div>
<div class='codeArea'>
3、添加tab项（addItem(with content)）：
<pre>
$("#tabDemo2").getCcayTabManager().addItem({
	content:"&lt;div id='heihei'>content内容指定&lt;/div>",
	tabId:"testtest",
	title:"ccay.i18n.label.remark"
})
</pre>
</div>
<div class='codeArea'>
4、指定新增的tab项在某个tabid的后面：
	<pre>
		$('#tabDemo2').getCcayTabManager().addItem({
			content:"应用属性addItemAtAfter，指定新增的tab项在某个tabid的后面。",
			title:"addItemAtAfter",
			addItemAtAfter:"_tabitem1"
		});
	</pre>
</div>
<div class='codeArea'>
5、得到tab项数目：
<pre>
$("#XXX").manager().getItemCount()
</pre>
</div>
<div class='codeArea'>
6，关闭当前tab：
<pre>
$("#XXX").ccayTabRemoveItem();
</pre>
</div>
<div class='codeArea'>
7、指定tabid关闭tab：
<pre>
//"tabId"为该tab项的tabId，可html中指定或者添加的时候指定
$("#XXX").manager().removeItem("tabId");
</pre>
</div>
<div class='codeArea'>
8、选择前一个tab项：
<pre>$("#XXX").manager().selectPrevItem() </pre>
</div>
<div class='codeArea'>
9、选择后一个tab项：
<pre>$("#XXX").manager().selectNextItem()</pre>
			</div>
<div class='codeArea'>
10、选中tab的一次事件：
<pre>
$('#id').ccayTab({
	fnOnceSelectItem:function(tabid){
		tabid == "XXX" && alert("现在执行的是改tab项的点击一次事件，只执行一次");
	}
});
</pre>
			</div>
			
    </div>
    <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:150px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:150px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
	  <form class="init ccay-form">
	    <div class="ccay-form-body">
	    <ul>
	          <li class="ccay-form-row">
		            <samp><h3>问题</h3></samp>
		           <span class="ccay-form-input">
		               <h3>解决方案</h3>
		           </span>
		      </li>
	    </ul>
		</div>     
		<div class="ccay-form-custom">
		    <ul>                     
		        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole  -->
		        <li class="ccay-form-row">
		             <samp class="i18n" i18nKey="1,tab如何绑定点击事件？"></samp>                          
		             <span class="ccay-form-input">使用fnAfterSelectItem事件设置，或者fnOnceSelecteItem事件。
				   </span>
		        </li> 
		    </ul>
		</div>
	  </form>                    
	</div>  	 
</div>	 
